<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
		     .box1{ 
				background: #f00;
				float: left;
			}
			 .box2{ 
				background: #0f0;
				float: left;
			}
			.box3{
				background: #00f;
				float: left;				
			}
		</style>
	</head>
	<body>
		<!-- 
		 1浮动流排版方式
		 1-1浮动流是一种 "脱离标准流"的排版方式
		 1-2浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
		 
		 2注意点:		 
		 2-1.浮动流中没有居中对齐, 也就是没有center这个取值
		 2-2.在浮动流中是不可以使用margin: 0 auto;
		 
		 3特点:
		 
		 3-1.在浮动流中是不区分块级元素/行内元素/行内块级元素的
		 无论是级元素/行内元素/行内块级元素都可以水平排版
		 
		 3-2.在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
		 
		 3-3.综上所述, 浮动流中的元素和标准流中的行内块级元素很像
		 
		 4脱标: 脱离标准流
		 4-1.当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
		 4-2.浮动元素脱标之后会有什么影响?
		 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
		 
		 5浮动元素排序规则
		 5-1相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
		 5-2不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
		 5-3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定
		 
		 -->
         <div class="box1"></div> 
		 <div class="box2"></div>
		 <div class="box3"></div>
		 
	</body>
</html>
